<template>
  <j-modal
    title="选择营销订单"
    :width="modalWidth"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    style="top: 5%; height: 100%; overflow-y: hidden"
    wrapClassName="ant-modal-cust-warp"
    cancelText="关闭"
  >
    <a-row :gutter="10" style="padding: 10px; margin: -10px">
      <a-col :md="24" :sm="24">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline" @keyup.enter.native="onSearch">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-item label="营销订单号" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
                  <a-input ref="goods" placeholder="营销订单号" v-model="queryParam.code"></a-input>
                </a-form-item>
              </a-col>
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-col :md="6" :sm="24">
                  <a-button type="primary" @click="loadData(1)">查询</a-button>
                  <a-button style="margin-left: 8px" @click="searchReset(1)">重置</a-button>
                </a-col>
              </span>
            </a-row>
          </a-form>
          <a-table
            ref="table"
            :scroll="scrollTrigger"
            size="middle"
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: getType }"
            :loading="loading"
            :customRow="rowAction"
          >
          </a-table>
        </div>
      </a-col>
    </a-row>
  </j-modal>
</template>
<script>
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'TslSelectTradeOrderModal',
  mixins: [JeecgListMixin],
  props: ['modalWidth', 'multi', 'status', 'isCalcCost', 'isGeneratePackageProcementOrder'],
  data() {
    return {
      visible: false,
      confirmLoading: false,
      loading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      columns: [
        { dataIndex: 'code', align: 'center', title: '营销订单编码' },
        { dataIndex: 'reviewCode', align: 'center', title: '评审表编码' },
        { dataIndex: 'customer', align: 'center', title: '客户类型' },
        {
          title: '客户',
          align: 'center',
          dataIndex: 'customerId_dictText',
        },
        {
          title: '业务员',
          align: 'center',
          dataIndex: 'salesman',
        },
      ],
      scrollTrigger: {},
      dataSource: [],
      queryParam: {
        code: '',
        status: this.status,
        isCalcCost: this.isCalcCost,
        // isGeneratePackageProcementOrder: this.isGeneratePackageProcementOrder,
      },
      selectedRowKeys: [],
      selectionRows: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      searchValue: '',
      url: {
        list: '/review/bussInternationalTradeOrders/list',
      },
      checkStrictly: true,
      fullscreen: false,
    }
  },
  created() {
    this.loadData()
  },
  watch: {
    code: {
      handler(val) {
        console.log('val', val)
        if (val) {
          
        }
      },
    },
    visible: {
      handler(val) {
        
      },
    },
  },
  computed: {
    // 计算属性的 getter
    getType: function () {
      return this.multi == true ? 'checkbox' : 'radio'
    },
  },
  methods: {
    show() {
      this.visible = true
      this.loadData()
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    modalFormOk() {
      this.loadData()
    },
    loadData() {
      var params = this.getQueryParams()
      getAction(this.url.list, params).then((res) => {
        this.dataSource = res.result.records
      })
    },
    rowAction(record, index) {
      return {
        on: {
          click: () => {
            let arr = []
            arr.push(record.id)
            this.selectedRowKeys = arr
            this.selectionRows = []
            this.selectionRows.push(record)
          },
          dblclick: () => {
            let arr = []
            arr.push(record.id)
            this.selectedRowKeys = arr
            this.selectionRows = []
            this.selectionRows.push(record)
            this.handleSubmit()
          },
        },
      }
    },
    searchReset() {
      this.queryParam.code = ''
    },
    handleSubmit() {
      this.$emit('selectOk', this.selectionRows)
      this.searchReset(0)
      this.handleClear()
    },
    handleCancel() {
      this.handleClear()
    },
    handleClear() {
      this.visible = false
      this.selectedRowKeys = []
    },

    onSearch(value) {
      this.loadData()
    },

    isFullscreen(val) {
      this.fullscreen = val
    },
  },
}
</script>

<style lang="less" scoped>
.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
</style>
